
import MsNode from '../../../components/vue/MenuAdd/msNode.vue' // 材料板块的子组件
import StepNode from '../../../components/vue/MenuAdd/stepNode.vue' // 步骤板块的组件
import MenuHeader from '../../../components/vue/Header.vue'// 头部

export default {
  components: {
    MsNode,
    StepNode,
    MenuHeader
  },
  data () {
    return {
      // 下一步切换
      next: true, // 最后提交按钮的disabled编辑或禁用状态
      activeName: '1', // 标签页
      activeNames: ['1', '2', '3'],
      active: 0, // 步骤条
      // 菜谱板块
      options: [], // 菜谱类型列表
      form: { // 用户输入的菜谱数据
        mtitle: '',
        mtypeid: 2 // 默认选中项的value
      },
      menuFile: '', // 菜谱上传图片信息
      fileLength: 0,
      src: '', // 展示图片的地址
      // 材料板块
      ms: [], // 菜谱材料数据
      // 步骤板块
      step: [] // 步骤数据
    }
  },
  mounted: function () {
    // 当前载入查询的菜谱类型
    var vuethis = this
    this.$axios.get(
      'http://localhost:8089/push_war_exploded/MenuController/findType.action'
    )
      .then(response => {
        // console.log(response.data)
        vuethis.options = response.data
      }).catch(error => {})
  },
  methods: {
    // 1.菜谱板块
    // 上传图片的选择和删除及存储file
    // 阻止upload的自己上传，进行再操作
    onchange (file, filesList, event) {
      this.fileLength += 1 // 表示有一张图片
      // 创建临时的路径来展示图片
      var windowURL = window.URL || window.webkitURL
      this.src = windowURL.createObjectURL(file.raw)
      // 重新写一个表单上传的方法
      // this.param = new FormData();
      // this.param.append('file', file.raw, file.name);
      this.menuFile = file.raw
    }, // 删除图片
    handleRemove (file, filesList) {
      this.fileLength -= 1 // 表示删了一张图片
      this.fileLength = filesList.length
      // this.param.delete('file')
      this.menuFile = ''
    },
    // 数据及步骤条和标签页的下一步切换
    menuNext () {
      // 判断是否选择了图片(还有为空判断)
      // this.fileLength=0说明没有选择图片
      if (this.fileLength == 0) {
        this.$message('请选择一张图片上传')
        return
      }
      // 获取表单数据
      // console.log(this.form);
      // 下一步切换
      if (this.active++ > 2) this.active = 0
      this.activeName = this.activeNames[this.active]
    },

    // 2.材料板块
    // 材料板块的数据收集和切换下一步
    getMs (msData) {
      // 获取子组件传来的材料数组数据赋值给父组件的ms console.log(msData);
      this.ms = msData
      // 材料板块的步骤条和标签页的下一步切换
      if (this.active++ > 2) this.active = 0
      this.activeName = this.activeNames[this.active]
    },

    // 3.步骤板块及最终的提交所有数据
    getStep (stepData, simg) { // 获取子组件传来的数据
      this.step = stepData
      // 提交按钮为可用状态
      this.next = !this.next
    },
    // 表单提交所有数据的事件
    onSubmit () {
      // 配置上传图片的头信息
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      // 封装所有数据  formdataAll(this.form,this.step,this.ms) return param
      var param = new FormData()
      // 菜谱数据
      param.append('mtitle', this.form.mtitle)
      param.append('mtypeid', this.form.mtypeid)
      param.append('menuFile', this.menuFile)
      // 步骤数据
      for (var i = 0; i < this.step.length; i++) {
        param.append('stepList[' + i + '].stitle', this.step[i].stitle)
        param.append('stepList[' + i + '].sdesc', this.step[i].sdesc)
      }
      // 材料数据
      for (var i = 0; i < this.ms.length; i++) {
        param.append('msList[' + i + '].mstitle', this.ms[i].mstitle)
        param.append('msList[' + i + '].msnumber', this.ms[i].msnumber)
      }
      // 步骤图片
      for (var i = 0; i < this.step.length; i++) {
        param.append('stepFile', this.step[i].sfile)
      }

      // 然后通过ajax把内容通过axios来传到后台
      const vuethis = this

      this.$axios.post(
        'http://localhost:8089/push_war_exploded/MenuController/addMenuAll.action', param, config)
        .then(response => {
          if (response.data > 0) {
            vuethis.$message({
              message: '添加成功',
              type: 'success'
            })
             this.$router.push('/menuList')// 重定向到列表页
          } else {
            vuethis.$message.error('添加失败')
          }
        }).catch(error => {
          vuethis.$message.error('请求失败')
        })
    }
  }
}
